<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>原生JS实现图片爆炸特效</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        body {
            overflow: hidden;
        }
        
        #boom {
            width: 500px;
            height: 320px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -200px 0 0 -320px;
            /* border: 1px solid black; */
        }
        
        #boom_node {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        
        #boom_node>div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='boom'>
        <div id='boom_node'></div>
    </div>
    <script type="text/javascript">
        var index = 0;
        var zIndex = 9999999;

        //本地图片路径
        var arr = ['images/lye1.jpg', 'images/lye2.jpg', 'images/lye3.jpg'];
        var imgIndex = 0;

        function random(min, max) {
            return parseInt(min + Math.random() * (max - min));
        }

        show(10, 8);

        function show(x, y) {
            var R = x;
            var T = y;
            //爆炸前生成下一张图片
            var oDiv2 = document.createElement('div');
            oDiv2.id = 'l' + index;
            oDiv2.style.zIndex = zIndex;
            //让下一张图片位于爆作图之下
            zIndex--;
            index++;

            //如果三张不同的图片切换完，切换到第一张
            if (imgIndex == arr.length) {
                imgIndex = 0
            };
            boom_node.appendChild(oDiv2);

            //按数量生成小格子
            for (var i = 0; i < T; i++) {
                for (var j = 0; j < R; j++) {
                    var oDiv = document.createElement('div');
                    //给小格子生成宽高
                    oDiv.style.width = boom_node.offsetWidth / R + 'px';
                    oDiv.style.height = boom_node.offsetHeight / T + 'px';
                    //浮动生成大的div
                    oDiv.style.float = 'left';
                    //背景及背景定位
                    oDiv.style.background = 'url(' + arr[imgIndex] + ')';
                    oDiv.style.backgroundPositionX = -j * (boom_node.offsetWidth / R) + 'px';
                    oDiv.style.backgroundPositionY = -i * (boom_node.offsetHeight / T) + 'px';
                    //随机延迟过渡
                    oDiv.style.transition = (1.3 + Math.random() * 0.5) + 's all ease ' +
                        (0.1 + Math.random() * 0.16) + 's';
                    document.getElementById('l' + (index - 1)).appendChild(oDiv);
                }
            };
            //切换到下一张
            imgIndex++;
            //2秒后图片爆炸及消失
            setTimeout(function() {
                var allDiv = document.getElementById('l' + (index - 1)).children;
                for (var i = 0; i < allDiv.length; i++) {
                    //爆炸
                    allDiv[i].style.transform = 'perspective(800px) rotateX(' + random(-190, 191) + 'deg) rotateY(' + random(-190, 191) + 'deg) scale(' + (1.5 + Math.random() * 0.6) + ') translateX(' + random(-300, 301) + 'px) translateY(' + random(-300, 301) + 'px) rotate(' + random(-190, 191) + 'deg)';
                    //消失
                    allDiv[i].style.opacity = 0;

                };
                //自调函数,让爆炸之前底部切换到下一张
                show(x, y);
                //清除爆炸后小div的占位
                setTimeout(function() {
                    //底层ID为'l+(index+0)',未爆炸为'l+(index+1)',已爆炸为'l+(index+2)'
                    boom_node.removeChild(document.getElementById('l' + (index - 2)))

                }, 1800);


            }, 2000);
        }
    </script>
</body>

</html>